<template>
	<view class="one">
		<view class="swiper-item">
			<view class="">
				<u-cell-item arrow-direction="down" title="城市" :value="obj.city?obj.city:'请选择'" @click="showCity = true"></u-cell-item>
				<u-cell-item arrow-direction="down" title="区域" :value="obj.districts?obj.districts:'请选择'" @click="showArea = true"></u-cell-item>
			</view>
			<u-field v-model="obj.schoolName" label="高中名称" input-align="right" placeholder="请输入高中名称">
			</u-field>
			<u-field v-model="obj.name" label="姓名" input-align="right" placeholder="请输入姓名">
			</u-field>
			<u-field v-model="obj.phone" label="手机号" input-align="right" placeholder="请填输入手机号">
			</u-field>
			<view class="basic-btn" @click="signUp()">
				提交个人信息
			</view>
		</view>
		<u-select v-model="showCity" :list="cityList" @confirm="confirm1"
			confirm-color="#20b86f"></u-select>
		<u-select v-model="showArea" :list="AreaList" @confirm="confirm2"
			confirm-color="#20b86f"></u-select>
	</view>
</template>

<script>
	import api from 'utils/api.js'
	export default {
		data() {
			return {
				obj: {
					adminUsersId: "",
				    province: "",
				    city: "",
				    districts: "",
				    schoolName: "",
				    name: "",
				    phone: ""
				},
				showCity: false,
				showArea: false,
				AreaList: [],
				cityList: []
			}
		},
		onLoad(options) {
			this.obj.adminUsersId = uni.getStorageSync('userId'),
			this.my_city_data();
		},
		methods: {
			confirm1(e) {
				this.obj.city = e[0].label;
				this.my_districts_data(e[0].label);
			},
			confirm2(e) {
				this.obj.districts = e[0].label;
			},
			// 获取城市列表
			my_city_data() {
				this.http({
					url: `api/v1/users/my_city_data`,
					method: 'GET',
					success: res => {
						if(res.errcode == 0) {
							this.cityList = [];
							for (let s of res.result.cityList) {
								let item = {
									value: s.adcode,
									label: s.name
								}
								this.cityList.push(item);
							}
						}
					},
				})
			},
			my_districts_data(ad_name) {
				this.http({
					url: `api/v1/users/my_districts_data?ad_name=${ad_name}`,
					method: 'GET',
					success: res => {
						if(res.errcode == 0) {
							this.AreaList = [];
							for (let s of res.result.districts) {
								let item = {
									value: s.adcode,
									label: s.name
								}
								this.AreaList.push(item);
							}
						}
					},
				})
			},
			// 提交
			signUp() {
				this.http({
					url: `${api.ServerUrlW}api/v1/summerWork/signUp`,
					method: 'POST',
					data: this.obj,
					success: res => {
						if(res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '提交成功'
							})
							this.obj = {
								adminUsersId: uni.getStorageSync('userId'),
							    province: "",
							    city: "",
							    districts: "",
							    schoolName: "",
							    name: "",
							    phone: ""
							}
						}
					},
				})
			}
		},
	}
</script>

<style lang="less">
	.one{
		.swiper-item {
			.basic-text1 {
				color: #f90303;
				margin-top: 20rpx;
			}
		}
		.basic-btn {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #00ca8a;
			color: #FFFFFF;
			text-align: center;
			margin: 60rpx 100rpx;
			border-radius: 100px;
		}
		.basic-btn:active {
			opacity: .6;
		}
	}
</style>
